<template>
  <div class="address">
    <!-- 头部 -->
    <header>
      <i class="iconfont icon-zuo" @click="$router.go(-1)"></i>
      <p>选择城市</p>
    </header>
    <div class="search">
      <div>
        <i class="iconfont icon-sousuo"></i>
        <!-- <input type="text" placeholder="请输入搜索关键词" v-model="val" @input="searchCity" /> -->
        <input type="text" placeholder="请输入搜索关键词" v-model="val" />
      </div>
    </div>
    <div class="content" v-show="!val">
      <div class="citysBox">
        <h2 class="title">当前城市：</h2>
        <ul class="cityList">
          <li class="city">{{$store.state.locationCity}}</li>
        </ul>
      </div>
      <div class="citysBox">
        <h2 class="title">热门城市：</h2>
        <ul class="cityList">
          <li
            class="city"
            v-for="item in hotCitys"
            :key="item.id"
            @click="chooseCity(item)"
          >{{item.n}}</li>
        </ul>
      </div>
      <div class="citysBox">
        <h2 class="title"></h2>
        <ul class="cityList">
          <li
            class="city"
            v-for="item in otherCity"
            :key="item.id"
            @click="chooseCity(item)"
          >{{item.n}}</li>
        </ul>
      </div>
      <div class="citysBox" v-for="item in allCitys" :key="item.title">
        <h2 class="title">{{item.title}}</h2>
        <ul class="cityList">
          <li class="city" v-for="val in item.list" :key="val.id" @click="chooseCity(val)">{{val.n}}</li>
        </ul>
      </div>
    </div>
    <!-- 渲染搜索的城市 -->
    <div class="match" v-show="val">
      <ul>
        <li v-for="item in matchArr" :key="item.id" @click="chooseCity(item)">{{item.n}}</li>
        <li v-show="matchArr.length==0">没有你想要的结果！</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  //   name: "address",
  components: {},
  props: {},
  data() {
    return {
      val: "", // 搜索的值
      isShow: true, // 默认显示所有城市
      matchArr: [], // 用来装匹配到的城市
      timer: 1,
      hotCitys: JSON.parse(localStorage.getItem("hotCitys")),
      otherCity: [
        {
          count: 8,
          id: 5064,
          n: "普洱",
          pinyinFull: "Puer",
          pinyinShort: ""
        },
        {
          count: 7,
          id: 5051,
          n: "时光市",
          pinyinFull: "Shiguangshi",
          pinyinShort: ""
        }
      ],
      allCitys: JSON.parse(localStorage.getItem("allCitys")),
      addAddressList: JSON.parse(localStorage.getItem("addAddressList"))
    };
  },
  watch: {},
  computed: {},
  methods: {
    //   back(){
    //       this.$router.go(-1);
    //   }
    // 点击跳转
    chooseCity(data) {
      this.$store.commit("setCity", data.n);
      this.$router.go(-1);
    },
    // 搜索城市
    // searchCity() {
    //   clearTimeout(this.timer);
    //   this.timer = setTimeout(() => {
    //     if (this.val) {
    //       this.isShow = false;
    //     } else {
    //       this.isShow = true;
    //       this.matchArr = [];
    //       return;
    //     }
    //     console.log(this.val);
    //     this.addAddressList.forEach(res => {
    //       if (
    //         res.n.indexOf(this.val) != -1 ||
    //         this.upCase(res.pinyinShort).startsWith(this.upCase(this.val))
    //       ) {
    //         let arr = [];
    //         if (this.matchArr.indexOf(res) == -1) {
    //           this.matchArr.push(res);
    //         }
    //         if (res.n == this.val) {
    //           arr[0] = res;
    //           this.matchArr = arr;
    //         }
    //       }
    //     });
    //   }, 500);

    //   //   console.log(this.matchArr);
    // },
    upCase(str) {
      // let reg = /w+/img;
      str = str.toUpperCase();
      return str;
    }
  },
  watch: {
    "val": function() {
      // 搜索城市
      console.log(this.val);
      clearTimeout(this.timer);
      let arr = [];
      this.timer = setTimeout(() => {
        this.addAddressList.forEach(item => {
          if (
            this.upCase(item.pinyinFull).indexOf(this.upCase(this.val)) !=-1 ||
            this.upCase(item.pinyinShort).indexOf(this.upCase(this.val)) !=-1 ||
            item.n.indexOf(this.val) !=-1
          ) {
            arr.push(item);
          }
        });
        this.matchArr = arr;
      }, 100);
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import "~@/assets/css/common.scss";
.address {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: vw(10) vw(16);
    background-color: #1c2635;
    i {
      font-size: vw(18);
      color: #eee;
    }
    p {
      width: vw(600);
      font-size: vw(18);
      text-align: center;
      color: #fff;
    }
  }
  .search {
    padding: vw(10) 0;
    text-align: center;
    background: #f6f6f6;

    div {
      display: inline-block;
      width: vw(312);
      height: vw(35);
      border: 1px solid #aaa;
      border-radius: vw(10);
      padding: 0 vw(5);
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      background: #fff;
      i {
        font-size: vw(22);
        color: #aaa;
      }
      input {
        width: vw(280);
        border: none;
        line-height: vw(33);
        font-size: vw(14);
        color: #666;
        background: #fff;
        padding-left: vw(5);
      }
    }
  }
  .content {
    .citysBox {
      .title {
        font-size: vw(18);
        color: #666;
        background: #ebebeb;
        padding: vw(10) vw(16);
      }
      .cityList {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: vw(10) vw(16);
        .city {
          width: 25%;
          font-size: vw(16);
          color: #333;
          padding: vw(10) 0;
        }
      }
    }
  }
  .match {
    ul {
      padding: 0 vw(16);
      li {
        font-size: vw(16);
        border-bottom: 1px solid #999;
        padding: vw(10) 0;
      }
    }
  }
}
</style>